<template>
	<view class="container flex-c">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">审核进度</text>
		</uni-nav-bar>
		<view class="background"></view>
		<view class="body flex-c">
			<image v-if="status == 0" class="status-img" src="@/public/images/apply/shz.png" mode="aspectFit"></image>
			<image v-if="status == 1" class="status-img" src="@/public/images/apply/shytg.png" mode="aspectFit"></image>
			<image v-if="status == 2" class="status-img" src="@/public/images/apply/shwtg.png" mode="aspectFit"></image>
			<text class="status-title color-white text-bold">
				{{ status == 0 ? '审核中...' : (status == 1 ? '审核已通过' : '审核未通过')}}
			</text>
			<text class="status-info color-white" v-if="status == 0">
				工作人员审核中，
				审核预计时间：1~5个工作日
			</text>
			<text class="status-info color-white" v-else-if="status == 1">
				专家账号信息已生成，可通过下方账号密码登录
				彩虹专家网页版发布比赛方案
			</text>
			<text class="status-info color-white" v-else>
				审核未通过，可查看下方原因，
				如有问题需咨询可联系平台客服
			</text>
			<view class="status-steps">
				<text class="steps-title text-bold">{{  status == 0 ? '审核进度' : (status == 1 ? '账号信息' : '审核未通过原因') }}</text>
				<view class="steps-list flex-r" v-if="status == 0">
					<view class="list-left flex-c">
						<template v-for="(info, index) in stepList">
							<view class="icon flex-c" :key="index">
								<image v-if="info.active" src="@/public/images/apply/lc1.png" mode="aspectFit"></image>
								<image v-else src="@/public/images/apply/lc2.png" mode="aspectFit"></image>
								<text v-if="info.active" :class="{'active': index == status}"></text>
							</view>
						</template>
					</view>
					<view class="list-right flex-c">
						<view class="info flex-c" v-for="(info, index) in stepList" :key="index">
							<text class="info-title">{{info.title}}</text>
							<text class="info-desc" v-if="info.desc">{{info.desc}}</text>
						</view>
					</view>
				</view>
				<view class="steps-result flex-c" v-if="status == 1">
					<view class="result-list flex-r" v-for="(item, index) in result" :key="index">
						<text class="title">{{item.title}}</text>
						<text class="value" @tap="copyText(item.value, item.title)">{{item.value}}</text>
					</view>
				</view>
				<view class="steps-reason" v-if="status == 2">
					<text>{{reason}}</text>
				</view>
			</view>
			<image v-if="status == 1" class="status-notice" src="@/public/images/apply/wxts.png" mode="widthFix" @tap="copyText('jade6550', '微信号')"></image>
		</view>
		<view class="foot bottom-ios" v-if="status == 2">
			<view class="submit-box" @tap="goService()">
				<button class="active">联系客服</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 0,
				stepList: [{
					title: '信息已提交',
					desc: '个人信息及方案信息已提交成功',
					active: true
				}, {
					title: '审核中...',
					desc: '工作人员审核中，审核预计时间：1~5个工作日',
					active: true
				}, {
					title: '审核结果',
					active: false
				}],
				result: {
					loginUrl: {
						title: '访问链接',
						value: 'https://ugc.caihongsport.com/user/login',
					}, 
					userId: {
						title: '账号',
						value: ''
					}, 
					password: {
						title: '密码',
						value: '123456'
					}
				},
				reason: '审核未通过原因查询中...'
			};
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		onLoad() {
			if(typeof this.$Route.query.approvalStatus == 'number'){
				this.status = this.$Route.query.approvalStatus
			}
			if(this.user.isApplyUgc == 1 || this.$Route.query.isApplyUgc == 1){
				this.result.userId.value = this.user.phone
				this.getApprovalStatus();
			}else{
				this.$Router.replace({name: 'applyexpert'});
			}
		},
		methods: {
			copyText(text, title) {
				uni.setClipboardData({
					data: text,
					success() {
						uni.showToast({
							title: title + '已复制',
							icon: 'success'
						})
					}
				})
			},
			getApprovalStatus() {
				this.$http.get({
					url: '/api/applyUgc/getStatus'
				}).then((data)=>{
					console.log(data);
					if(data.success && data.result){
						this.status = data.result.approvalStatus
						if(this.status == 1){
							if(data.result.browsUrl){
								this.result.loginUrl.value = data.result.browsUrl
							}
							this.result.userId.value = data.result.userName
							this.result.password.value = data.result.password
						}
						if(this.status == 2){
							this.reason = data.result.approvalContent || '审核未通过原因查询失败！请联系客服处理。'
						}
					}else{
						uni.showModal({
							title: '错误提示',
							content: data.message || '审核状态查询失败，请返回重试',
							showCancel: false,
							success: (res) => {
								if(res.confirm){
									this.$Router.replace({name: 'applyexpert'});
								}
							}
						})
					}
				}).catch((err)=>{
					console.log(err);
					uni.showModal({
						title: '错误提示',
						content: '审核状态查询失败，请返回重试',
						showCancel: false,
						success: (res) => {
							if(res.confirm){
								this.$Router.replace({name: 'applyexpert'});
							}
						}
					})
				})
			},
			goService(){
				this.$goByName('helpservice', {tabCur: 1})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 0;
	}
	.background{
		background-color: #0055FF;
		height: 560rpx;
	}
	.body{
		margin-top: -560rpx;
		align-items: center;
		padding: 0 20rpx;
		.status-img{
			margin-top: 70rpx;
			width: 120rpx;
			height: 120rpx;
		}
		.status-title{
			margin-top: 27rpx;
			font-size: 36rpx;
			line-height: 36rpx;
		}
		.status-info{
			margin-top: 25rpx;
			font-size: 24rpx;
			line-height: 42rpx;
			text-align: center;
		}
		.status-steps{
			margin: 50rpx 0 0;
			padding: 40rpx 20rpx;
			width: 100%;
			min-height: 210rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			box-sizing: border-box;
			.steps-title{
				font-size: 30rpx;
				line-height: 30rpx;
			}
			.steps-list{
				margin-top: 30rpx;
				.list-left{
					align-items: center;
					.icon{
						align-items: center;
						image{
							width: 40rpx;
							height: 40rpx;
						}
						text{
							width: 2rpx;
							height: 100rpx;
							background: #D9D9D9;
						}
						.active{
							background: #0055FF;
						}
					}
				}
				.list-right{
					//height: 320rpx;
					margin-left: 28rpx;
					//justify-content: space-between;
					.info{
						margin-top: 72rpx;
						.info-title{
							font-size: 28rpx;
							line-height: 28rpx;
						}
						.info-desc{
							margin-top: 18rpx;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #999999;
						}
					}
					.info:first-child{
						margin-top: 6rpx;
					}
				}
			}
			.steps-result{
				.result-list{
					margin-top: 30rpx;
					align-items: flex-start;
					justify-content: space-between;
					font-size: 28rpx;
					line-height: 42rpx;
					.title{
						color: #999999;
					}
					.value{
						max-width: 420rpx;
						font-family: Arial;
						word-break: break-all;
					}
				}
			}
			.steps-reason{
				margin-top: 30rpx;
				word-break: break-all;
				text{
					font-size: 28rpx;
					line-height: 42rpx;
					color: #999999;
				}
			}
		}
		.status-notice{
			margin-top: 20rpx;
			width: 100%;
		}
	}
	.foot{
		max-width: $max-width;
		margin: $pc-margin;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0px -1px 0px 0px #EDEDED;
		.submit-box{
			margin: 16rpx 20rpx;
			button{
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
			}
		}
	}
</style>
